<template>
  <div class="company-style">
    <!-- 导航栏 start -->
    <van-nav-bar title="简历" left-arrow fixed @click-left="onClickLeft" />
    <!-- 导航栏 end -->

    <!-- 筛选 start -->
    <van-sticky :offset-top="46">
      <van-dropdown-menu active-color="#07f">
        <van-dropdown-item :title="title_readState" v-model="query.readState" :options="option_readState" @change="chooseReadState" />
        <van-dropdown-item :title="title_edu" v-model="query.edu" :options="option_edu" @change="chooseEdu" />
        <van-dropdown-item :title="title_workyears" v-model="query.workyears" :options="option_workyears" @change="chooseWorkyears" />
        <van-dropdown-item :title="title_sex" v-model="query.sex" :options="option_sex" @change="chooseSex" />
      </van-dropdown-menu>
    </van-sticky>
    <!-- 筛选 end -->

    <!-- 内容 -->
    <div class="content-top" style="margin-top: 46px; margin-bottom: 60px">
      <van-pull-refresh v-model="refreshing" @refresh="onReloadData">
				<van-empty v-if="list.length == 0 && listLoading==false" description="暂无相关信息" />
        <van-list v-else class="my-resume-list" @load="loadData" v-model="listLoading" :finished="finished" finished-text="没有更多了">
          <van-swipe-cell class="item" v-for="(item,index) in list" :key="index">
            <div class="show" @click="resumeClick(item.personID)">
              <div class="person">
                <img src="@/assets/img/company/no-avatar-boy.png" alt="" v-if="item.headImgUrl == '' && item.sex == '男'" />
								<img src="@/assets/img/company/no-avatar-girl.png" alt="" v-else-if="item.headImgUrl == '' && item.sex == '女'" />
                <img :src="item.headImgUrl" :alt="item.personName + '的头像'" v-else />
                <p>
                  <b>{{item.personName}}</b>
                  <span :class="{'unread':item.readState == '0'}">{{item.readState=='1'?'已读':'未读'}}</span>
                </p>
                <p>
                  <span>{{item.sex}}</span>
                  <span>{{item.age}}岁</span>
                  <span>{{item.edu}}</span>
                  <span>{{item.workYears}}</span>
                </p>
              </div>
              <div class="apply">
                <span class="txt01">{{item.stationName}}</span>
                <span>{{item.applyDateStr}}</span>
              </div>
            </div>
            <template #right>
              <van-button square text="删除" type="danger" style="height: 100%" />
            </template>
          </van-swipe-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { NavBar, Sticky, DropdownMenu, DropdownItem, List, Button, SwipeCell, } from "vant";
import Global from '@/Global';
export default {
  name: "LivePlay",
  components: {
    [NavBar.name]: NavBar,
    [Sticky.name]: Sticky,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [List.name]: List,
    [Button.name]: Button,
    [SwipeCell.name]: SwipeCell,
  },
  // 定义属性
  data() {
    return {
      //option_data
      option_readState: [],
      option_edu: [],
      option_workyears: [],
      option_sex: [],
      //title data
      title_readState: '状态',
      title_edu: '学历',
      title_workyears: '经验',
      title_sex: '性别',
      //query data
      query: {
        pageIndex: 0,
        pageSize: 30,
        readState: '',
        edu: '',
        workyears: '',
        sex: ''
      },
      //loading
      listLoading: true,
      finished: false,
			refreshing:false,
      //data
      list: []

    };
  },
  mounted() {
    this.initOption();
    this.loadData();
  },
  // 方法集合
  methods: {
    initOption() {
      this.option_readState = [{ text: '全部', value: '' }, { text: '已读', value: '1' }, { text: '未读', value: '0' }];
      this.option_sex = [{ text: '全部', value: '' }, { text: '男', value: '男' }, { text: '女', value: '女' }];
      this.option_edu.push({ text: '全部', value: '' });
      this.option_workyears.push({ text: '全部', value: '' });
      this.$bd.edu.forEach(item => {
        this.option_edu.push({ text: item.codeValue, value: item.code });
      })
      this.$bd.workYears.forEach(item => {
        this.option_workyears.push({ text: item.codeValue, value: item.code });
      })
    },
    loadData() {
      this.query.pageIndex++;
			this.listLoading = true;
			this.finished = false;
      this.$api.get('/CompanyResume/GetAllRecieveResumePageList', this.query).then(res => {
        this.listLoading = false;
				this.refreshing = false;
        if (res.success) {
          //no data
          if (this.query.pageIndex == 1 && res.response.length == 0) {
            //...
						this.finished = true;
          }
          else {
            var resultList = res.response;
            //no more data
            if (this.query.pageIndex != 0 && resultList.length == 0) {
              this.finished = true;
            }
            this.list = [...this.list, ...resultList];
          }
        }
      })
    },
    chooseReadState(value) {
      this.query.readState = value;
      this.title_readState = this.findTextByValue(this.option_readState, value);
      this.loadDataByFilter();
    },
    chooseEdu(value) {
      this.query.edu = value;
      this.title_edu = this.findTextByValue(this.option_edu, value);
      this.loadDataByFilter();
    },
    chooseWorkyears(value) {
      this.query.workyears = value;
      this.title_workyears = this.findTextByValue(this.option_workyears, value);
      this.loadDataByFilter();
    },
    chooseSex(value) {
      this.query.sex = value;
      this.title_sex = this.findTextByValue(this.option_sex, value);
      this.loadDataByFilter();
    },
    loadDataByFilter() {
      this.query.pageIndex = 0;
      this.list = [];
      this.loadData();
    },
    findTextByValue(list, value) {
      list.forEach(item => {
        if (item.value == value) {
          return item.text;
        }
      })
    },
		resumeClick(personID){
			this.$router.push({name:'company-resume-info',query:{personID:personID}});
		},
		onClickLeft(){
			this.$router.back(-1);
		},
		onReloadData(){
			//title data
			this.title_readState = '状态';
			this.title_edu='学历';
			this.title_workyears='经验',
			this.sex ='性别',
			this.query={
				pageIndex: 0,
        pageSize: 30,
        readState: '',
        edu: '',
        workyears: '',
        sex: ''
			}
			this.refreshing = true;
			this.list  = [];
			this.loadData();
		}
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>